<template>
  <div class="article">
    <el-card>
      <template #header>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </template>
      <el-form label-width="100px">
        <el-form-item label="状态">
          <!-- 单选组件 -->
          <el-radio-group v-model="form.status">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失效</el-radio>
            <el-radio :label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 频道 -->
        <el-form-item label="频道">
          <!-- <el-select placeholder="请选择" v-model="form.channel_id">
            <el-option
              v-for="item in channelsList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select> -->
          <HmSelect :form="form"></HmSelect>
        </el-form-item>
        <!-- 日期 -->
        <el-form-item label="日期">
          <el-date-picker
            v-model="form.picker"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <!-- 刷选 -->
        <el-form-item>
          <el-button type="primary" @click="submit">筛选</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 列表 -->
    <el-card>
      <template #header>
        根据筛选条件查询 {{total}} 条结果
      </template>
      <el-table :data="list">
        <el-table-column label="封面">
          <template v-slot="scope">
            <img class="cover" :src="scope.row.cover.images[0]" alt="" />
          </template>
        </el-table-column>

        <el-table-column prop="title" label="标题"> </el-table-column>

        <el-table-column prop="status" label="状态">
          <template v-slot="scope">{{
            scope.row.status === 2 ? '审核通过' : '审核不通过'
          }}</template>
        </el-table-column>
        <el-table-column label="发布时间" width="320">
          <template v-slot="{ row }">{{ row.pubdate }}</template>
        </el-table-column>
        <el-table-column prop="read_count" label="阅读数"> </el-table-column>
        <el-table-column prop="comment_count" label="评论数"> </el-table-column>
        <el-table-column prop="like_count" label="点赞数"> </el-table-column>
        <el-table-column width="300" label="操作">
          <template v-slot="scope" >
            <div>
              <h3 v-show="0">{{ scope.$index }}</h3>
              <el-button  @click="edit(scope.row)">编辑</el-button>
              <el-button @click="del(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
     <el-pagination
      @size-change="pageChange"
      @current-change="sizeChange"
      :current-page="form.page"
      :page-sizes="[1,10,20,30]"
      :page-size="form.per_page"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { channels, mpArticles, mpArticlesDelete } from '@/api/index.js'
export default {
  data () {
    return {
      form: {
        picker: [], //【起始时间，借宿时间】
        status: null, //文章状态
        channel_id: '', //是，不传胃全部
        begin_pubdate: '', //否 起始时间
        end_pubdate: '', //否 结束时间
        page: 1, //否 页码 默认为一页
        per_page: 10 //否 每页数量 不传默认10
      },
      // channelsList: [], //频道列表
      list: [], //文章列表
      total:0
    }
  },
  async created () {
    // const res = await channels()
    // this.channelsList = res.data.channels
    // this.submit()
    this.getData()
    // console.log('频道',res);
  },
  watch: {
    'form.picker': {
      handler (newVal, oldVal) {
        console.log('值变了', newVal)
        if (newVal.length === 2) {
          this.form.begin_pubdate = newVal[0]
          this.form.end_pubdate = newVal[1]
        }
      },
      deep: true
    }
  },
  methods: {
    async getData () {
      const res = await mpArticles(this.form)
      this.list = res.data.results
      this.total=res.data.total_count
      console.log('文章列表', res)
    },
    async submit(){
      this.form.page=1
this.getData()
    },
    //页码修改
    pageChange(page){
      this.form.page=page
      this.getData()
    },
    sizeChange(size){
      this.form.per_page=size
      //页码回到第一页
      this.form.page=1
      this.getData()
    },
    del(row){
     this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          // console.log('确定');
          await mpArticlesDelete(row.id)
          //提示
          this.$message.success('删除成功')
          this.submit()
        }).catch(() => {
         console.log('取消');
          });          
    },
    //编辑
    edit(row){
      this.$router.push('/publish?id='+row.id)
    }
  }
}
</script>

<style lang="less" scoped>
.cover{
  width: 50px;
}
.el-pagination{
  text-align: center;
  padding: 20px 0;
}
</style>

